<script setup>
import {ref} from "vue";
import BaseDrawer from "@/components/drawer/BaseDrawer.vue";
import QueryDrawer from "@/components/drawer/QueryDrawer.vue";
import BaseDialog from "@/components/common/BaseDialog.vue";
import List from "./List.vue";
import Form from "./Form.vue";
import Query from "./Query.vue";

// 新增或更新抽屉开关
const saveOrUpdateVisible = ref(false)
// 查询抽屉开关
const queryVisible = ref(false)
// 业务查询数据（插槽内的数据）
const currQueryData = ref(null)
// 业务提交数据（插槽内的数据）
const currSubmitData = ref(null)
// 业务渲染数据
const currListData = ref(null)
// 编辑数据
const editVisible = ref(false);
// 编辑数据
const removeVisible = ref(false);

// 提交提交抽屉数据
const handleDrawerSubmit = () => {
    saveOrUpdateVisible.value = false
    currSubmitData.value.addData()
}

const handleExport = () => {
    console.log("导出功能")
}

const handleQuery = (commonQuery) => {
    queryVisible.value = false;
    const allQuery = {...commonQuery, ...currQueryData.value?.queryData}
    currListData.value.getPageDataByParam(allQuery)
}

const handleEdit = () => {
    editVisible.value = false
}

const handleRemove = () => {
    removeVisible.value = false
}

</script>

<template>
    <!-- 数据操作按钮组 -->
    <div class="data-operation-group">
        <el-button-group>
            <el-button @click="">列设置</el-button>
            <el-button @click="queryVisible = true">高级查询</el-button>
            <el-button @click="saveOrUpdateVisible = true">新增</el-button>
            <el-button @click="handleExport">导出</el-button>
        </el-button-group>
    </div>
    <!-- 数据渲染组件 -->
    <List ref="currListData" @submitRemoveVisible="removeVisible = true"
          @submitEditVisible="editVisible = true"></List>
    <!-- 新增/全量更新抽屉组件 -->
    <BaseDrawer v-model:visible="saveOrUpdateVisible" @submit="handleDrawerSubmit"
                title="新增员工基本信息表">
        <template #saveOrUpdate>
            <Form ref="currSubmitData"></Form>
        </template>
    </BaseDrawer>
    <!-- 高级查询抽屉 -->
    <QueryDrawer v-model:visible="queryVisible" @query="handleQuery">
        <template #queryParam>
            <Query ref="currQueryData"></Query>
        </template>
    </QueryDrawer>
    <!-- 编辑（部分修改）组件 -->
    <BaseDialog v-model:visible="editVisible" @submitEdit="handleEdit" slotType="edit">
        <template #modify>
            <Form ref="currSubmitData"></Form>
        </template>
    </BaseDialog>
    <!-- 删除组件 -->
    <BaseDialog v-model:visible="removeVisible" @submitRemove="handleRemove" slotType="remove">
        <template #remove>
            <div>是否要删除数据？</div>
        </template>
    </BaseDialog>
</template>

<style scoped lang="scss">
.data-operation-group {
    position: absolute;
    top: 80px;
    right: 28px;
}
</style>
